<script setup>
import {onMounted, ref, shallowReactive, shallowRef} from "vue";
import router from "../../../router";
import {updateApi} from "../../../api/course.js";
import {RULE} from "../../../const";
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {getResponseData} from "../../../util";
import {listApi as listStageApi} from "../../../api/stages.js";
import {listTeacherApi} from "../../../api/emp.js";

// 获取当前课程记录
let course = JSON.parse(sessionStorage.getItem('course'));

/* ==================== 查询全部的讲师记录 ==================== */
let teacherItems = ref([]);

async function listTeacher() {
  let res = await listTeacherApi();
  let teachers = getResponseData(res);
  Object.values(teachers).forEach(item => {
    teacherItems.value.push({'label': item['name'], 'value': item['id']});
  });
}

/* ==================== 查询全部的授课阶段记录 ==================== */
let stageItems = ref([]);

async function listStage() {
  let res = await listStageApi();
  let stages = getResponseData(res);
  Object.values(stages).forEach(item => {
    stageItems.value.push({'label': item['name'], 'value': item['id']});
  });
}

let statusItems = ref([
  {'label': '未开始', 'value': 0},
  {'label': '正在进行', 'value': 1},
  {'label': '已结束', 'value': 2}
]);




/* ==================== 添加表单 ==================== */

// 表单项
let items = shallowRef([
  {'label': '课程名称', 'prop': 'name', 'required': true, 'span': 12},
  {
    'label': '课程状态', 'prop': 'status', 'type': 'select', optionItems: statusItems.value,
    'required': true, 'span': 12
  },
  {
    'label': '对应阶段', 'prop': 'stageId', 'type': 'select', optionItems: stageItems.value,
    'required': true, 'span': 12
  },
  {
    'label': '主讲老师', 'prop': 'teacherId', 'type': 'select', optionItems: teacherItems.value,
    'required': true, 'span': 12
  },
  {'label': '开课日期', 'prop': 'startTime', 'type': 'date', 'required': true, 'span': 12},
  {'label': '结课日期', 'prop': 'endTime', 'type': 'date', 'required': false, 'span': 12},
  {'label': '课程描述', 'prop': 'info', 'type': 'textarea'},
]);
// 表单值
let data = shallowReactive(course);
// 表单规则
let rules = {
  /*'name': RULE.REALNAME,
  'phone': RULE.PHONE,
  'emergencyContactPhone': RULE.PHONE,
  'idCard': RULE.IDCARD,
  'info': RULE.COMMON_INFO,*/
};

/* ==================== 加载函数 ==================== */
onMounted(() => {
  listTeacher()
  listStage()
});

</script>

<template>

  <my-nav :items="[
    {'icon': 'Avatar', 'label': '课程管理', 'url': '/Course'},
    {'icon': 'User', 'label': '课程列表', 'url': '/Course'},
    {'icon': 'Plus', 'label': '修改课程'},
  ]"/>

  <el-divider/>

  <el-card class="student-insert-card" header="修改课程信息">
    <my-form type="insert"
             :items="items"
             :data="data"
             :rules="rules"
             :api="updateApi"
             :fn="() => router.push('/Course')"/>
  </el-card>
</template>

<style scoped lang="scss">
.student-insert-card {
  width: 60%;
  margin: auto;
}
</style>